<template>
  <div class="progress clearBoth">
    <div class="left">
      <div class="up">
        <el-progress
          type="circle"
          :stroke-width="'10'"
          :percentage="data.complete"
          :show-text="false"
          style="margin-left: 50px;"
          :color="'rgb(12,90,232)'"
        />
        <div class="percentage">
          <p style="font-size: 14px;color: #999999;">
            已完成
          </p>
          <p style="font-size: 30px;color: #000;">
            {{ data.complete || '0' }}<span style="font-size: 16px">%</span>
          </p>
        </div>
      </div>
      <div class="down">
        <vl
          :lname="'任务总数'"
          :vname="data.sum"
          :vcolor="'rgb(0, 11, 255)'"
        />
        <vl
          :lname="'未完成'"
          :vname="data.undone"
          :vcolor="'rgb(0, 11, 255)'"
          class="m30"
        />
      </div>
    </div>
    <div class="right">
      <div class="up">
        <vl
          :lname="'未启动'"
          :vname="data.notStart"
        />
        <vl
          :lname="'开发中'"
          :vname="data.develop"
          class="m30"
        />
        <vl
          :lname="'测试中'"
          :vname="data.test"
          class="m30"
        />
      </div>
      <div class="down">
        <div class="clearBoth">
          <vl
            :lname="'昨日提交'"
            :vname="data.yesterdayFound"
            class="left"
          />
          <vl
            :lname="'昨日完成'"
            :vname="data.yesterdayEnd"
            class="left"
          />
        </div>
        <div class="clearBoth m30">
          <vl
            :lname="'今日提交'"
            :vname="data.todayFound"
            class="left"
          />
          <vl
            :lname="'今日完成'"
            :vname="data.todayEnd"
            class="left"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vl from '../vl';

export default {
  name: 'Index',
  components: { vl },
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style lang="scss" scoped>
  .progress {
    > div {
      height: 320px;
    }
    .up {
      height: 200px;
      padding-top: 30px;
      position: relative;
      .percentage {
        position: absolute;
        top: 65px;
        // left: 80px;
        width: 100%;
        > p {
          text-align: center;
        }
      }
    }
    .down {
      height: 120px;
      margin-left: 20px;
    }
    .left {
      width: 40%;
    }
    .right {
      width: 60%;
      position: relative;
      padding-left: 30px;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        border-left: 1px solid rgb(224, 224, 224);
      }
    }
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .pointer {
    cursor: pointer;
  }
  .clearBoth {
    &:after {
      content: '';
      clear: both;
      display: table;
    }
  }
  .m30 {
    margin-top: 30px;
  }
</style>
